<template>
<div id='add'>
    <h1>这是复习</h1>
    <!-- 双大括号 -->
    {{msg}}

    <!-- 鼠标悬停有小标题 -->
    <span v-bind:title="msg">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  <!-- 显示与隐藏 -->
  <p v-if="seen1">v-if显示与隐藏</p>
  <p v-show="seen2">v-show显示与隐藏</p>
  <!-- 循环 -->
  <p v-for="(item,index) in for1" :key="index">
      {{item.name}}---{{item.id}}
  </p>

  <!-- v-on 监听事件 -->
  <p>{{text}}</p>
  <button v-on:click="split">点击反转文字</button>

  <!-- v-model -->
  <div>
  <input type="text" v-model="text1">
  <p>{{ text1 }}</p>
  </div>

<!-- 使用组件 -->

   <zujian>nihao </zujian>

</div>
</template>

//  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
// 引入组件1
import zujian from '../components/zujian.vue'

export default {
    // 引入组件2
components:{
   zujian
},
    data() {
        return {
            msg:'hello-world'+new Date().toLocaleString(),
            seen1:true,
            seen2:true,
            for1:[
                {id:1,name:"zhangsan"},
                {id:2,name:"lisi"},
                {id:3,name:"wangwu"},
                {id:4,name:"zhaoliu"}
            ],
            text:'文字反转',
            text1:'',
        }
    },
    methods: {
        split(){
            // 先按空字符串分割为数组，再颠倒顺序，再组合成字符串
           this.text = this.text.split('').reverse().join('')
        }
    },
}
</script>
<style  scoped>
/* button{
    width: 50px;
    height: 20px;
} */
</style>